<template>
  <div class="float-btn">
    <div>
      <img src="../assets/icon-right-ygz.png" />
    </div>
    <div>已关注</div>
    <div class="count" v-if="count">{{ count }}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import VidServe from '@/api/vid.ts'

const count = ref(0)

const updateCount = () => [
  VidServe.favlist({
    pageSize: 1,
    pageNum: 1
  }).then(resp => {
    const { code, data } = resp
    if (code == 0) {
      const { total } = data
      count.value = +total
    }
  })
]
onMounted(() => {
  updateCount()
})

defineExpose({
  updateCount
})
</script>

<style lang="less" scoped>
.float-btn {
  z-index: 99;
  width: 66px;
  height: 66px;
  border-radius: 33px;
  background: #ffffff;
  border: 0.5px solid #f2f2f2;
  box-shadow: 0px 2px 5px 0px #0000000c;
  position: fixed;
  right: 10px;
  bottom: 30px;
  font-size: 11px;
  color: #0e0d16;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  img {
    width: 28px;
    height: 28px;
  }

  .count {
    position: absolute;
    right: 0px;
    top: 5px;
    background: linear-gradient(90deg, #f52f45 0%, #f55f5f 100%);
    color: #fff;
    min-width: 18px;
    height: 18px;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    padding: 0px 2px;
    border-radius: 999px;
  }
}
</style>
